<template>
    <div class="soldier">
        <div class="img" :class="direction" :style="{ transform: 'scaleY(' + dead + ')' }"></div>
        <div class="buff" :class="soldier.buff"></div>
    </div>
</template>
<script>
    import config from '../config';

    export default {
        props: {
            soldier: Object,
            direction: {
                value: 'own',
                type: String
            }
        },
        computed: {
            dead() {
                return (config.game.clocks.dead - this.soldier.deadTick) / config.game.clocks.dead;
            }
        },
        data() {
            return {

            };
        }
    }
</script>
<style lang="less" scoped>
    
    .soldier {
        position: absolute;
        width: 2rem;
        height: 4rem;
        .img {
            position: absolute;
            width: 2rem;
            height: 4rem;
            background-size: cover;
            transform-origin: 50% 100%;
            transition: all linear 1s;
            &.own {
                background-image: url("./images/archer.own.png");
            }
            &.target {
                background-image: url("./images/archer.target.png");
            }
        }
        .buff {
            position: absolute;
            margin-top: 2rem;
            width: 2rem;
            height: 2rem;
            background-size: cover;
            &.fire {
                background-image: url("./images/buff/fire.png");
            }
            &.ice {
                background-image: url("./images/buff/ice.png");
            }
            &.pest {
                background-image: url("./images/buff/pest.png");
            }
            &.tempt {
                background-image: url("./images/buff/tempt.png");
            }
            &.confusion {
                background-image: url("./images/buff/confusion.png");
            }
            &.quiet {
                background-image: url("./images/buff/quiet.png");
            }
            &.shield {
                background-image: url("./images/buff/shield.png");
            }
        }
    }
</style>